import Taro from "@tarojs/taro";
import { EnumEducationType, EnumWorkMode, MemberResumeDetailResult, MemberResumeEducationExpResult, MemberResumeProjectExpResult, MemberResumeWorkExpResult } from "@/apis/endpoint/model";
import { getMyGetmyresume, postMyEditintroduction, postMyEditprofessionskill, postMyUploadworkattachment } from "@/apis/endpoint/my";
import GpContainer from "@/components/GpContainer";
import GpFontIcon from "@/components/GpFontIcon";
import GpNavbar from "@/components/GpNavbar";
import { GpTouchableView } from "@/components/GpTouchableView";
import GpVerticelLine from "@/components/GpVerticelLine";
import { pageMapper } from "@/constants/pageMap";
import { NAVIGATION_BASE_LAYOUT } from "@/hooks/useLayout";
import { navigate } from "@/utils/navigation";
import { Popup, SafeArea } from "@taroify/core";
import { Button, Image, Text, View } from "@tarojs/components";
import clsx from "clsx";
import { Fragment, useMemo, useRef, useState } from "react";
import { useImmer } from "use-immer";
import { educationMap, genderMap, jobStatusMap } from "../../enum-options";
import styles from "./index.module.css";
import { isSetValue } from "@/utils/helper";
import { useJobStatus } from "./composables/useJobStatus";
import { useDidShow } from "@tarojs/taro";
import { fileUpload } from "@/apis/upload";
import { useNavigationOpacity } from "@/hooks/useNavigationOpacity";
import { handlePreview } from "@/utils/app";

export default function Index() {
  const [navigationBarHeight, setNavigationBarHeight] = useState(NAVIGATION_BASE_LAYOUT.navigationHeight + NAVIGATION_BASE_LAYOUT.statusBarHeight)
  const [resume, setResume] = useImmer({ isGuide: false } as MemberResumeDetailResult)
  const [forceEnter, setForceEnter] = useState(false)
  const qualificationCertificate = useMemo(() => {
    if (resume.qualificationCertificate) {
      return resume.qualificationCertificate.split(/\r?\n/).map(name => name.replace(/\-\s+/, ""))
    }
    return []
  }, [resume])
  const workModeTextMap = useRef(new Map([
    [EnumWorkMode.全职, "全职意向"],
    [EnumWorkMode.兼职, "兼职意向"],
    [EnumWorkMode.实习, "实习意向"]
  ]))
  const {
    jobStatusOpen,
    jobStatusOptions,
    handleJobStatusChosen,
    toggleJobStatus
  } = useJobStatus(() => resume, nextState => {
    setResume(draft => {
      draft.state = nextState
    })
  })
  useDidShow(() => {
    refreshData()
  })
  const [navigationOpacity] = useNavigationOpacity()
  function refreshData() {
    getMyGetmyresume()
    .send()
    .then(setResume)
  }
  function handleEditAdvantage() {
    navigate(pageMapper.fieldEdit.multiline, null, "navigateTo", {
      success(res) {
        res.eventChannel.emit("getField", {
          description: "丰富的个人优势介绍，更能赢得HR青睐",
          filedName: "我的优势",
          placeholder: "请输入优势",
          content: resume.introduction,
          autoHeight: true,
          action(value) {
            return postMyEditintroduction(JSON.stringify(value)).send({ loadingText: "保存中" })
          },
        } as FieldEditState)
      },
    })
  }
  function handleEditExtention() {
    navigate(pageMapper.me.resume.extention, null, "navigateTo", {
      success(res) {
        res.eventChannel.emit("receiveIntention", {
          workMode: resume.workMode,
          cityId: resume.cityId,
          cityName: resume.cityName,
          jobTypeId: resume.jobTypeId,
          jobTypeName: resume.jobTypeName,
          salaryMin: resume.salaryMin ? resume.salaryMin / 1000 : void 0,
          salaryMax: resume.salaryMax ? resume.salaryMax / 1000 : void 0,
          industryIds: resume.industryIds,
          industryNames: resume.industryNames
        })
      },
    })
  }
  function handleEditWorkExp(workExp?: MemberResumeWorkExpResult) {
    navigate(pageMapper.me.resume.workexp, null, "navigateTo", {
      success(res) {
        if (res.eventChannel && workExp) {
          const body: Recordable = {
            id: workExp.id,
            compName: workExp.companyName,
            position: workExp.positionName,
            content: workExp.content,
          }
          if (workExp.performance) body.achievement = workExp.performance
          if (workExp.departmentName) body.department = workExp.departmentName
          if (isSetValue(workExp.isInternship)) body.isTransition = workExp.isInternship
          if (isSetValue(workExp.isHideMe)) body.isHide = workExp.isHideMe
          if (workExp.startTime) body.startAt = workExp.startTime
          if (workExp.endTime) body.endAt = workExp.endTime
          res.eventChannel.emit("getWorkExp", body)
        }
      },
    })
  }
  function handleEditProjectExp(projectExp?: MemberResumeProjectExpResult) {
    navigate(pageMapper.me.resume.projectexp, null, "navigateTo", {
      success(res) {
        if (res.eventChannel && projectExp) {
          const body: Recordable = {
            id: projectExp.id,
            name: projectExp.name,
            role: projectExp.position,
            description: projectExp.content
          }
          if (projectExp.performance) body.achievement = projectExp.performance
          if (projectExp.link) body.link = projectExp.link
          if (projectExp.company) body.compName = projectExp.company
          if (projectExp.startTime) body.startAt = projectExp.startTime
          if (projectExp.endTime) body.endAt = projectExp.endTime
          res.eventChannel.emit("getProjectExp", body)
        }
      },
    })
  }
  function handleEditEducation(educationExp?: MemberResumeEducationExpResult) {
    navigate(pageMapper.me.resume.education, null, "navigateTo", {
      success(res) {
        if (res.eventChannel && educationExp) {
          const body: Recordable = {
            id: educationExp.id,
            schoolName: educationExp.schoolName,
            education: educationExp.education,
            educationType: educationExp.educationType,
          }
          if (educationExp.subjectId) body.subjectId = educationExp.subjectId
          if (educationExp.professionName) body.professionName = educationExp.professionName
          if (educationExp.content) body.content = educationExp.content
          if (educationExp.startTime) body.startAt = educationExp.startTime
          if (educationExp.endTime) body.endAt = educationExp.endTime
          res.eventChannel.emit("getEducation", body)
        }
      },
    })
  }
  function handleEditSkills() {
    navigate(pageMapper.fieldEdit.multiline, null, "navigateTo", {
      success(res) {
        res.eventChannel.emit("getField", {
          description: "简述您的专业技能，向HR展示您的职业优势",
          filedName: "专业技能",
          placeholder: "请输入技能名称、使用时长、掌握程度",
          content: resume.professionSkill,
          action(value) {
            return postMyEditprofessionskill(JSON.stringify(value)).send({ loadingText: "保存中" })
          },
        } as FieldEditState)
      },
    })
  }
  function handleEditCertificate() {
    const query = qualificationCertificate.length ? { names: qualificationCertificate.join(",") } : null
    navigate(pageMapper.select.certificate, query)
  }
  async function handleAttachment() {
    const { tempFiles } = await Taro.chooseMedia({
      count: 1,
      mediaType: ['image'],
      sourceType: ['album']
    })
    const { fullName } = await fileUpload(tempFiles[0].tempFilePath)
    await postMyUploadworkattachment(JSON.stringify(fullName)).send({ loadingText: '上传中...' })
    Taro.showToast({
      title: "上传成功",
      icon: "none"
    })
    refreshData()
  }
  function handleUploadResume() {
    navigate(pageMapper.me.resume.upload)
  }
  function renderImportPage() {
    return (
      <View className="box-border">
        <View className={styles["bg-linear-view"]}></View>
        <Image src="/static/images/me/resume-import.png" mode="widthFix" className="w-[440px] block mx-auto" />
        <View className="flex flex-col text-[48px] text-primary font-bold leading-[64px] mt-[48px]">
          <Text className="text-center">上传附件简历</Text>
          <Text className="text-center">AI帮你填写信息</Text>
        </View>
        <GpTouchableView className="mt-[96px] px-[32px] box-border"
        >
          <Button className="text-center bg-theme h-[80px] leading-[80px] box-border rounded-[64px]" onClick={handleUploadResume}>
            <Text className="text-white text-[32px]">立即上传</Text>
          </Button>
        </GpTouchableView>
        <Text className="block text-third text-[24px] leading-[32px] px-[48px] mt-[20px]">
          * 建议使用PDF文件，也支持DOC、DOCX、JPG、PNG格式，大小不得超过20M
        </Text>
        <View className="flex flex-row justify-center mt-[96px]">
          <Text space="nbsp" className="text-[28px] text-theme" onClick={() => {
            setForceEnter(true)
          }}>
            暂无附件简历，手动填写 &gt;
          </Text>
        </View>
      </View>
    )
  }
  function renderResumePage() {
    return (
      <Fragment>
        <GpNavbar
          navigationBarTitleText="我的简历"
          navigationBarBackgroundColor={`rgba(255, 255, 255, ${navigationOpacity})`}
          navigationBarPlaceholder={false}
          onLayout={({navigationHeight,statusBarHeight}) => setNavigationBarHeight(navigationHeight+statusBarHeight)}
        />
        {renderPersonalInfo()}
        {renderListCards()}
      </Fragment>
    )
  }
  function renderPersonalInfo() {
    return (
      <View className="bg-[inherit] relative h-[532px] box-border">
        <Image src="/static/images/common/home-bg.png" className="w-[750px] h-[400px] object-cover block z-0" />
        <View className="absolute inset-0 px-[40px]" style={{
          paddingTop: `${navigationBarHeight}px`
        }}>
          <View className="flex flex-row items-center w-full box-border mt-[24px]">
            <View className="flex-1">
              <View className="flex flex-row items-center gap-[24px]">
                <Text className="text-[#1A1B1D] text-[56px] leading-[56px] font-bold">{resume.name}</Text>
                <GpFontIcon name="icon-bianji" className="text-theme font-bold text-[32px] leading-[32px]" onClick={() => {
                  navigate(pageMapper.me.info)
                }} />
              </View>
              <View className="mt-[20px] flex flex-row items-center gap-[16px] text-secondary text-[28px] leading-[28px]">
                <Text>{genderMap.get(resume.gender)}</Text>
                <GpVerticelLine height={20} width={2} color="#ACAEB2" />
                <Text>{resume.age}岁</Text>
                <GpVerticelLine height={20} width={2} color="#ACAEB2" />
                <Text>{resume.experienceDesc}</Text>
                {
                  resume.educationJson
                  ? (
                    <Fragment>
                      <GpVerticelLine height={20} width={2} color="#ACAEB2" />
                      <Text>{resume.educationJson.name}</Text>
                    </Fragment>
                  ) : null
                }
              </View>
            </View>
            <Image src={resume.head ?? __DEF_AVATAR__} className="size-[128px] block rounded-[50%]" />
          </View>
          <View className="mt-[48px] grid grid-cols-2 grid-rows-2 gap-[24px]">
            <View className="flex flex-row items-center gap-[24px]">
              <GpFontIcon name="icon-shouji" size={28} className="text-primary" />
              <Text className="text-primary text-[28px]">{resume.mobile ?? "--"}</Text>
            </View>
            <View className="flex flex-row items-center gap-[24px]">
              <GpFontIcon name="icon-weixin" size={28} className="text-primary" />
              <Text className="text-primary text-[28px]">{resume.weChat ?? "--"}</Text>
            </View>
            <View className="flex flex-row items-center gap-[24px]">
              <GpFontIcon name="icon-youjian" size={28} className="text-primary" />
              <Text className="text-primary text-[28px]">{resume.email ?? "--"}</Text>
            </View>
          </View>
        </View>
      </View>
    )
  }
  function renderListCards() {
    return (
      <View className="flex flex-col gap-[24px] box-border px-[16px]">
        <View className={styles.cardItem}>
          <View className="flex flex-row items-center gap-[16px]" onClick={() => toggleJobStatus(true)}>
            <GpVerticelLine width={8} height={32} />
            <Text className="text-[#1A1B1D] text-[36px] font-bold">求职状态</Text>
            <Text className={clsx("text-[28px] flex-1 text-right", isSetValue(resume.state) ? "text-primary" : "text-placeholder")}>
              {isSetValue(resume.state) ? jobStatusMap.get(resume.state) : "请选择求职状态"}
            </Text>
            <GpFontIcon name="icon-a-jiantou_youda" size={28} className="text-placeholder" />
          </View>
        </View>
        <View className={styles.cardItem}>
          <View className="flex flex-row items-center gap-[16px]">
            <GpVerticelLine width={8} height={32} />
            <Text className="text-[#1A1B1D] text-[36px] font-bold">个人优势</Text>
            <GpFontIcon name="icon-bianji" size={28} className="text-theme font-bold ml-auto" onClick={handleEditAdvantage} />
          </View>
          {
            resume.introduction
            ? (
            <View className="mt-[48px] pb-[16px]">
              <Text className="text-third text-[28px] leading-[48px] text-justify maxline3">
                {resume.introduction}
              </Text>
            </View>
            ) : null
          }
        </View>
        <View className={styles.cardItem}>
          <View className="flex flex-row items-center gap-[16px]">
            <GpVerticelLine width={8} height={32} />
            <Text className="text-[#1A1B1D] text-[36px] font-bold">求职意向</Text>
            <GpFontIcon name="icon-bianji" size={28} className="text-theme font-bold ml-auto" onClick={handleEditExtention} />
          </View>
          <View className="mt-[64px] pb-[16px]">
            <View className="box-border">
              <Text className="text-[32px] font-bold text-primary">
                {workModeTextMap.current.get(resume.workMode)}
              </Text>
              {
                isSetValue(resume.workMode)
                ? (
                  <View className="mt-[40px]">
                    <View className="flex flex-row items-center box-border gap-[16px]">
                      <Text className="flex-1 text-[32px] text-primary">{resume.jobTypeName}</Text>
                      {
                        resume.salaryMin && resume.salaryMax
                        ? (
                          <Text className="text-[28px] text-theme">{resume.salaryMin}-{resume.salaryMax}K</Text>
                        ) : null
                      }
                      <GpFontIcon name="icon-a-jiantou_youda" size={28} className="text-placeholder" />
                    </View>
                    <Text className="text-[24px] text-primary block mt-[14px]">{resume.cityName || "城市不限"}</Text>
                    <Text className="text-[24px] text-third block mt-[14px]">{resume.industryNames?.length ? resume.industryNames[0] : '行业不限'}</Text>
                  </View>
                ) : null
              }
            </View>
            {/* <GpVerticelLine height={2} color="#EEEEEE" className="!w-full my-[48px]" />
            <View className="box-border">
              <Text className="text-[32px] font-bold text-primary">兼职意向</Text>
              <View className="mt-[40px]">
                <View className="flex flex-row items-center box-border gap-[16px]">
                  <Text className="flex-1 text-[32px] text-primary">产品经理</Text>
                  <Text className="text-[28px] text-theme">13-18K</Text>
                  <GpFontIcon name="icon-a-jiantou_youda" size={28} className="text-placeholder" />
                </View>
                <Text className="text-[24px] text-primary inline-block mt-[14px]">城市不限</Text>
                <Text className="text-[24px] text-third inline-block mt-[14px]">行业不限</Text>
              </View>
            </View> */}
          </View>
        </View>
        <View className={styles.cardItem}>
          <View className="flex flex-row items-center gap-[16px]">
            <GpVerticelLine width={8} height={32} />
            <Text className="text-[#1A1B1D] text-[36px] font-bold">工作经历</Text>
            <GpFontIcon name="icon-bianji" size={28} className="text-theme font-bold ml-auto" onClick={() => handleEditWorkExp()} />
          </View>
          {
            resume.workExps?.length
            ? (
            <View className="py-[16px]">
              {
                resume.workExps.map(item => (
                  <View key={item.id} className={clsx("pt-[48px]", styles.borderedItem)}>
                    <View className="flex flex-row justify-between items-start gap-[40px]">
                      <Text className="text-[32px] text-primary font-bold leading-[40px]">
                        {item.companyName}
                      </Text>
                      <View className="flex-none flex flex-row items-center gap-[8px]" onClick={() => handleEditWorkExp(item)}>
                        <Text className="text-third text-[28px]">{item.timeRange?.replace("/", ".")}</Text>
                        <GpFontIcon name="icon-a-jiantou_youda" size={28} className="text-placeholder" />
                      </View>
                    </View>
                    <View className="flex flex-row items-center gap-[20px] mt-[20px]">
                      <Text className="text-third text-[28px] font-medium">
                        {item.positionName}{item.departmentName ? ` · ${item.departmentName}` : null}
                      </Text>
                      {
                        item.isInternship
                        ? (
                          <View className="flex flex-row justify-center items-center border-[2px] h-[32px] px-[12px] border-solid border-theme/30 rounded-[4px]">
                            <Text className="text-theme text-[24px] leading-[24px]">实习</Text>
                          </View>
                        ) : null
                      }
                    </View>
                    <View className="mt-[24px]">
                      <View className="text-third text-[28px] leading-[48px] maxline3">
                        内容：{item.content}
                      </View>
                      {
                        item.performance
                        ? (
                          <View className="text-third text-[28px] leading-[48px] maxline3">
                            业绩：{item.performance}
                          </View>
                        ) : null
                      }
                    </View>
                    {/* <View className="flex flex-row flex-wrap gap-[12px] box-border mt-[24px]">
                      <View className="flex flex-row items-center h-[48px] px-[16px] rounded-[8px] bg-third/10">
                        <Text className="text-third text-[26px]">
                          需求分析
                        </Text>
                      </View>
                      <View className="flex flex-row items-center h-[48px] px-[16px] rounded-[8px] bg-third/10">
                        <Text className="text-third text-[26px]">
                          需求分析
                        </Text>
                      </View>
                    </View> */}
                  </View>
                ))
              }
            </View>
            ) : null
          }
        </View>
        <View className={styles.cardItem}>
          <View className="flex flex-row items-center gap-[16px]">
            <GpVerticelLine width={8} height={32} />
            <Text className="text-[#1A1B1D] text-[36px] font-bold">项目经验</Text>
            <GpFontIcon name="icon-bianji" size={28} className="text-theme font-bold ml-auto" onClick={() => handleEditProjectExp()} />
          </View>
          {
            resume.projectExps?.length
            ? (
            <View className="py-[16px]">
              {
                resume.projectExps.map(item => (
                  <View key={item.id} className={clsx("pt-[48px]", styles.borderedItem)}>
                    <View className="flex flex-row justify-between items-start gap-[40px]">
                      <Text className="text-[32px] text-primary font-bold leading-[40px]">
                        {item.name}
                      </Text>
                      <View className="flex-none flex flex-row items-center gap-[8px]" onClick={() => handleEditProjectExp(item)}>
                        <Text className="text-third text-[28px]">{item.timeRange?.replace("/", ".")}</Text>
                        <GpFontIcon name="icon-a-jiantou_youda" size={28} className="text-placeholder" />
                      </View>
                    </View>
                    <View className="flex flex-row items-center gap-[20px] mt-[20px]">
                      <Text className="text-third text-[28px] font-medium">
                        {item.position}{item.company ? ` · ${item.company}` : null}
                      </Text>
                    </View>
                    <View className="mt-[24px]">
                      <View className="text-third text-[28px] leading-[48px] maxline3">
                        内容：{item.content}
                      </View>
                      {
                        item.performance
                        ? (
                          <View className="text-third text-[28px] leading-[48px] maxline3">
                            业绩：{item.performance}
                          </View>
                        ) : null
                      }
                    </View>
                  </View>
                ))
              }
            </View>
            ) : null
          }
        </View>
        <View className={styles.cardItem}>
          <View className="flex flex-row items-center gap-[16px]">
            <GpVerticelLine width={8} height={32} />
            <Text className="text-[#1A1B1D] text-[36px] font-bold">教育背景</Text>
            <GpFontIcon name="icon-bianji" size={28} className="text-theme font-bold ml-auto" onClick={() => handleEditEducation()} />
          </View>
          {
            resume.educationExps?.length
            ? (
            <View className="py-[16px]">
              {
                resume.educationExps.map(item => (
                  <View key={item.id} className={clsx("pt-[48px]", styles.borderedItem)}>
                    <View className="flex flex-row justify-between items-start gap-[40px]">
                      <Text className="text-[32px] text-primary font-bold leading-[40px]">
                        {item.schoolName}
                      </Text>
                      <View className="flex-none flex flex-row items-center gap-[8px]" onClick={() => handleEditEducation(item)}>
                        <Text className="text-third text-[28px]">{item.timeRange?.replace('/', '.')}</Text>
                        <GpFontIcon name="icon-a-jiantou_youda" size={28} className="text-placeholder" />
                      </View>
                    </View>
                    <View className="flex flex-row items-center gap-[20px] mt-[20px]">
                      <Text className="text-third text-[28px] font-medium">
                        {educationMap.get(item.education)}{item.professionName ? ` · ${item.professionName}` : null}
                      </Text>
                      {
                        item.educationType === EnumEducationType.全日制
                        ? (
                        <View className="flex flex-row justify-center items-center border-[2px] h-[32px] px-[12px] border-solid border-theme/30 rounded-[4px]">
                          <Text className="text-theme text-[24px] leading-[24px]">统招</Text>
                        </View>
                        ) : null
                      }
                    </View>
                    {
                      item.content
                      ? (
                      <View className="mt-[24px]">
                        <Text className="text-third text-[28px] leading-[48px] maxline3">
                          在校经历：{item.content}
                        </Text>
                      </View>
                      ) : null
                    }
                  </View>
                ))
              }
            </View>
            ) : null
          }
        </View>
        <View className={styles.cardItem}>
          <View className="flex flex-row items-center gap-[16px]">
            <GpVerticelLine width={8} height={32} />
            <Text className="text-[#1A1B1D] text-[36px] font-bold">资格证书</Text>
            <GpFontIcon name="icon-bianji" size={28} className="text-theme font-bold ml-auto" onClick={handleEditCertificate} />
          </View>
          {
            qualificationCertificate.length
            ? (
              <View className="pb-[16px] pt-[64px] flex flex-row flex-wrap gap-[16px] box-border">
                {
                  qualificationCertificate.map((l, index) => (
                    <View key={index} className="flex flex-row items-center h-[56px] px-[16px] rounded-[8px] bg-third/10">
                      <Text className="text-third text-[26px]">
                        {l}
                      </Text>
                    </View>
                  ))
                }
              </View>
            ) : null
          }
        </View>
        <View className={styles.cardItem}>
          <View className="flex flex-row items-center gap-[16px]">
            <GpVerticelLine width={8} height={32} />
            <Text className="text-[#1A1B1D] text-[36px] font-bold">专业技能</Text>
            <GpFontIcon name="icon-bianji" size={28} className="text-theme font-bold ml-auto" onClick={handleEditSkills} />
          </View>
          {
            resume.professionSkill
            ? (
            <View className="mt-[48px] pb-[16px]">
              <Text className="text-third text-[28px] leading-[48px] text-justify maxline3">
                {resume.professionSkill}
              </Text>
            </View>
            ) : null
          }
        </View>
        <View className={styles.cardItem}>
          <View className="flex flex-row items-center gap-[16px]">
            <GpVerticelLine width={8} height={32} />
            <Text className="text-[#1A1B1D] text-[36px] font-bold">附件简历/作品</Text>
          </View>
          <View className="pt-[40px]">
            <View className="box-border py-[24px]">
              <View className="flex flex-row items-center justify-between">
                <Text className="text-primary text-[32px] leading-[40px] font-medium">附件简历</Text>
                <GpTouchableView onClick={handleUploadResume}>
                  <Text className="text-placeholder text-[28px] font-normal pr-[8px]">去上传</Text>
                  <GpFontIcon name="icon-a-jiantou_youda" size={28} className="text-placeholder" />
                </GpTouchableView>
              </View>
              {
                resume.attachment
                ? (
                <View className="mt-[32px]">
                  <GpTouchableView onClick={() => handlePreview(resume.attachment!)} className="flex flex-row items-center gap-[16px] bg-[#F4F6FC] rounded-[8px] h-[128px] px-[24px]">
                    <Image src="/static/icons/resume/PDF.png" className="size-[80px] object-cover" />
                    <Text className="text-primary text-[28px]">简历</Text>
                  </GpTouchableView>
                </View>
                ) : null
              }
            </View>
            <View className="box-border py-[24px]">
              <View className="flex flex-row items-center justify-between">
                <Text className="text-primary text-[32px] leading-[40px] font-medium">个人作品</Text>
                <GpTouchableView onClick={handleAttachment}>
                  <Text className="text-placeholder text-[28px] font-normal gap-[8px]">去上传</Text>
                  <GpFontIcon name="icon-a-jiantou_youda" size={28} className="text-placeholder" />
                </GpTouchableView>
              </View>
              {
                resume.workAttachment
                ? (
                <View className="mt-[32px]">
                  <GpTouchableView onClick={() => handlePreview(resume.workAttachment!)} className="flex flex-row items-center gap-[16px] bg-[#F4F6FC] rounded-[8px] h-[128px] px-[24px]">
                    <Image src="/static/icons/resume/JPG.png" className="size-[80px] object-cover" />
                    <Text className="text-primary text-[28px]">作品集</Text>
                  </GpTouchableView>
                </View>
                ) : null
              }
            </View>
          </View>
        </View>
      </View>
    )
  }
  function renderActions() {
    return (
      <View>
        {renderJobStatus()}
      </View>
    )
  }
  function renderJobStatus() {
    return (
      <Popup open={jobStatusOpen} placement="bottom" rounded onClose={toggleJobStatus}>
        <Popup.Backdrop />
        <View className="px-[32px] pb-[34px] box-border pt-[48px]">
          <View className="flex flex-row justify-between items-center">
            <Text className="text-primary font-bold text-[36px]">求职状态</Text>
            <GpFontIcon name="icon-guanbi" color="#707275" size={48} onClick={() => toggleJobStatus(false)}/>
          </View>
          <Text className="text-third text-[28px] inline-block mt-[28px]">
            求职状态会影响你被推荐的频率，以及HR的决策
          </Text>
          {
            jobStatusOptions.map(item => (
              <GpTouchableView
                key={item.value}
                className={clsx("flex flex-row items-center justify-between h-[128px]", styles.jobStatusOption)}
                onClick={() => handleJobStatusChosen(item)}
              >
                <Text className={clsx("text-primary text-[32px] font-medium", {
                  "text-theme font-bold": item.value === resume.state
                })}>{item.label}</Text>
                {
                  item.value === resume.state
                  ? (
                    <GpFontIcon name="icon-xuanzhong" size={32} className="text-theme" />
                  ) : null
                }
              </GpTouchableView>
            ))
          }
        </View>
        <SafeArea />
      </Popup>
    )
  }
  return (
    <GpContainer className={resume.isGuide ? "bg-white" : "bg-[#F4F6FC]"}>
      {forceEnter || !resume.isGuide ? renderResumePage() : renderImportPage()}
      {renderActions()}
    </GpContainer>
  )
}
